<div class="filter-container">
    <svg class="filter-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.35-4.35"/>
    </svg>
    <input 
        type="text" 
        name="filter"
        class="filter-input"
        placeholder="Search customers..."
        [(ngModel)]="model.filter" 
        (keyup)="filterChanged($event)" />
    <button 
        type="button"
        class="clear-button"
        [class.visible]="model.filter"
        (click)="clearFilter()"
        title="Clear search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
    </button>
</div>